<template>
    <div style="height: inherit;">
        <div :class="'theme-skin-'+themeSkinName">
            <HeadBar title="管理控制台-集成系统" :isNotifications="false" :appGroups="'/famework/appgroups'" :principal="'/framework/principal'" @collapsedCallback="getCollapsed" @themeCallback="setTheme" @appNavigate="spaNavigate">
                <template slot="logo">
                    <img src="./resource/images/logo.png" />
                </template>
                <template slot="content">
                    <div class="content">
                        <Input prefix="ios-search" placeholder="搜索文档、控制台、解决方案" style="max-width: 300px;" />
                    </div>
                </template>
            </HeadBar>
        </div>
    </div>
</template>

<script>
import HeadBar from '#/components/common/mainframe/frame2/head/index.vue'
export default {
  components: { HeadBar },
  computed: {
    singleSpa () {
      return this.$reduxStore.singleSpa
    }
  },
  methods: {
    getModules (name) {
      const result = window.$LOADER_SPA_MODULES.map(x => {
        if (!window.$REGISTER_SPA_MODULES_SUCCESS.includes(x.name)) x.loaderStat = -1
        return x
      }).filter(x => !x.base)
      return name ? result.find(x => x.name === name) : result
    },
    unloadApplication () {
      const modules = this.getModules().filter(x => this.singleSpa.getAppStatus(x.name) === 'MOUNTED')
      if (modules.length > 0) {
        this.singleSpa.unloadApplication(modules[0].name)
      }
    },
    getCollapsed () {
      document.querySelectorAll('a.item.product-bar').forEach(x => {
        const spaApp = this.getModules(x.getAttribute('name'))
        x.style = 'opacity:' + ((spaApp && spaApp.loaderStat <= 0) ? '0.5' : '1')
      })
    },
    setTheme (skinName) {
      this.themeSkinName = skinName
      this.unloadApplication()
    },
    spaNavigate (app) {
      if (app) {
        const spaApp = this.getModules(app.name)
        if (spaApp) {
          if (spaApp.loaderStat > 0) {
            // window.history.pushState(null, null, app.path || `/${app.name}`)
            singleSpaNavigate(app.path || `/${app.name}`) // eslint-disable-line
          }
        } else {
          window.location.href = app.url
        }
      }
    }
  },
  data () {
    return {
      themeSkinName: localStorage.theme || 'white'
    }
  }
}
</script>

<style lang="less" type="text/less">
    .content{
        text-align: right;
    }
</style>
